<template>
  <el-dialog class="dia-style" :title="title" :visible.sync="open" width="500px" append-to-body>
    <hk-form
      ref="formRef"
      :data="formData"
      :rules="rules"
      :labelWidth="labelWidth"
      :btnHidden="btnHidden"
      :dictList="dictList"
      :formLabels="formLabels"
    />
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import HkForm from '@/components/HKForm'
import { addPost, updatePost } from '@/api/system/post'

export default {
  name: 'editDialog',
  components: { HkForm },
  props: {
    title: {
      type: String,
      default() {
        return '标题'
      }
    },
    form: {
      type: Object,
      default() {
        return {}
      }
    },
    statusList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      // 是否显示弹出层
      open: false,
      // 标题宽度
      labelWidth: '100',
      // 是否显示按钮
      btnHidden: true,
      // 表单项配置
      formLabels: [{
        label: '岗位名称',
        field: 'postName',
        type: 'input',
        span: 24
      },
        {
          label: '岗位编码',
          field: 'postCode',
          type: 'input',
          span: 24
        },
        {
          label: '岗位顺序',
          field: 'postSort',
          type: 'number',
          span: 24,
          attrs: {
            min: 0
          }
        },
        {
          label: '岗位状态',
          field: 'status',
          type: 'radio',
          list: 'statusList',
          span: 24
        }, {
          label: '备注',
          field: 'remark',
          type: 'textarea',
          span: 24
        }],
      formData: {},
// 表单校验
      rules: {
        postName: [{ required: true, message: '请输入岗位名称', trigger: 'blur' }],
        postCode: [{ required: true, message: '请输入岗位', trigger: 'blur' }],
        postSort: [{ required: true, message: '', trigger: 'blur' }]
      },
      dictList: {
        statusList: []
      }
    }
  },
  watch: {
    form: {
      handler(newVal) {
        if (newVal?.postId) {
          this.formData = {
            postCode: newVal?.postCode,
            postName: newVal?.postName,
            postSort: newVal?.postSort,
            remark: newVal?.remark,
            postId: newVal?.postId,
            status: newVal?.status.toString()
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.dictList.statusList = this.statusList
  },
  methods: {
    show() {
      this.open = true
      this.reset()
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs.formRef.handleFormSubmit('formLabels').then(res => {
        if (this.form?.postId !== undefined) {
          updatePost(Object.assign({}, { postId: this.form.postId }, res)).then(response => {
            this.$modal.msgSuccess('修改成功')
            this.open = false
            this.$emit('handleSubmit')
          })
        } else {
          addPost(res).then(response => {
            this.$modal.msgSuccess('新增成功')
            this.open = false
            this.$emit('handleSubmit')
          })
        }
      })

    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.formData = {
        postId: undefined,
        postCode: undefined,
        postName: undefined,
        postSort: 0,
        status: '0',
        remark: undefined
      }
      this.resetForm('form')
    }
  }
}
</script>

<style scoped>

</style>
